<template>
    <div class="box1">
        <div class="top">
            <p class="title">性别比例</p>
            <p class="bg"></p>
        </div>
        <div class="sex">
            <div class="man">
                <img src="../../images/man.png">
            </div>
            <div class="woman">
                <img src="../../images/woman.png">
            </div>
        </div>
        <div class="rate">
            <p>男生58%</p>
            <p>女士42%</p>
        </div>
        <div class="charts" ref="charts">

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive,onMounted } from 'vue'
import * as echarts from 'echarts';
//获取图形图表节点
let charts=ref();
onMounted(()=>{
    //初始化echarts实例
    let mycharts=echarts.init(charts.value);
    //设置配置项
    mycharts.setOption({
        //组件标题
        title: {
      text: '男女比例',//主标题
      textStyle: {//主标题颜色
        color: 'skyblue'
      },
      left: '40%'
    },
    //x|y
    xAxis: {
      show: false,//隐藏
      min: 0,
      max: 100
    },
    yAxis: {
      show: false,
      type: 'category'//在y轴展示
    },
    series: [
      {
        type: 'bar',
        data: [58],
        barWidth: 20,
        z: 100,//层级显示更高
        itemStyle: {
          color: 'skyblue',
          borderRadius: 20
        }
      }
      ,
      {
        type: 'bar',
        data: [100],
        barWidth: 20,
        //调整女士柱条位置，合并两个柱状图
        barGap: '-100%',
        itemStyle: {
          color: 'pink',
          borderRadius: 20
        }
      }
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    }
  });
})
</script>

<style lang="scss" scoped>
.box1 {
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 15px;
    .top {
        margin-left: 20px;

        .title {
            color: white;
            font-size: 20px;
        };

        .bg {
            width: 68px;
            height: 7px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 10px;
        };
    }
    .sex{
        display: flex;
        justify-content: center;
        .man{
            margin: 20px;
            width: 111px;
            height: 115px;
            background: url(../../images/man-bg.png);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .woman{
            margin: 20px;
            width: 111px;
            height: 115px;
            background: url(../../images/woman-bg.png);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .rate{
        display: flex;
        justify-content: space-between;
        color: white;}
    .charts{
            height: 100px;
        }
    
}
</style>
